<template>
    <div class="table">
        <div class="container">
          <el-row>
            <el-col :span="6">
              <el-card class="left-card">
                <org-tree-panel @nodeClick="handleNodeClick"></org-tree-panel>
              </el-card>
            </el-col>
            <el-col :span="18">
              <el-card class="right-card">
            <div class="handle-box">
                <el-button type="primary" size="mini" class="handle-del mr10" @click="add">新增</el-button>
                <el-input v-model="keyword" size="mini" placeholder="筛选名称" class="handle-input mr10"></el-input>
                <el-button type="primary" size="mini" icon="search" @click="query">筛选</el-button>
            </div>
            <el-table style="width:100%" :data="tableData.records"  :header-cell-style="{background:'#F5F7FA'}" ref="multipleTable" >
                <el-table-column type="index" label="序号" align="center" width="50"/>
                <el-table-column prop="fdName" label="姓名" sortable />
                <el-table-column prop="fdLoginName" label="登录名" sortable width="150"/>
                <el-table-column prop="fdNo" label="编号" sortable width="100"/>
                <el-table-column prop="fdParentName" label="部门名称" sortable width="150"/>
                <el-table-column prop="fdIsAvaliable" label="是否有效"  width="80">
                  <template slot-scope="scope">
                      <el-switch v-model="scope.row.fdIsAvaliable" :disabled="true"/>
                  </template>
                </el-table-column>
                <el-table-column label="操作"  align="center" width="250">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleView(scope.row)">查看</el-button>
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :page-size="tableData.size" layout="prev, pager, next" :total="tableData.total"/>
            </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
import {orgTree,list} from '@/components/mixins/form';
import orgTreePanel from '@/components/form/OrgTreePanel';
export default {
    name: 'sysOrgPersonList',
    data() {
        return {
          editUrl:'/sys/org/sys_org_person/edit',
          viewUrl:'/sys/org/sys_org_person/view',
          listUrl:'/api/sys/org/sys_org_person/list',
          deleteUrl:'/api/sys/org/sys_org_person',
          treeDataUrl:'/api/sys/org/sys_org_element/treeData',
          orgType:'ORG|DEPT',
          currentTreeOrgType:'',
        }
    },
    mixins:[orgTree,list],
    components:{orgTreePanel},
    methods: {
        add() {
          console.log(this.currentTreeValue);
            if(this.currentTreeOrgType === 2){
              const params = {
                  path: this.editUrl,
                  query: {fdParentId:this.currentTreeValue}
              }
              this.$common.openTag(params);  
            }else if(this.currentTreeOrgType === 1){
              this.$message({
                message: '机构下不允许新建人员,请注意',
                type: 'warning'
              });
            }
        },
        getData() {
            const queryObj = {
                keyword: this.tableData.keyword,
                current: this.tableData.current,
                fdParentId: this.currentTreeValue,
                fdOrgType: this.currentTreeOrgType
            };
            this.$post(this.listUrl,queryObj).then((res) => {
                this.tableData = res.data;
            });
        },
        handleNodeClick(data) {
          this.currentTreeValue = data.id;
          this.currentTreeOrgType = data.orgType;
          if(data.orgType == 1) return;
          this.getData();
        }
    }
}
</script>

<style scoped>
 @import "~@/assets/css/list.css";
.scroll-tree{
  height:500px;
  width:280px;
  float:left;
}
.left-card {
  margin-right: 15px;
}
</style>
